<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="item"><img src="https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg" alt=""></div>
        <div class="item"><img
                src="https://img1.baidu.com/it/u=2910476855,2188262851&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500"
                alt=""></div>
        <div class="item"><img src="https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg" alt=""></div>
        <div class="item"><img
                src="https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center"
                alt=""></div>
        <div class="item"><img
                src="https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center"
                alt=""></div>
                <div class="item"><img src="https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg" alt=""></div>
                <div class="item"><img
                        src="https://img1.baidu.com/it/u=2910476855,2188262851&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500"
                        alt=""></div>
                <div class="item"><img src="https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg" alt=""></div>
                <div class="item"><img
                        src="https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center"
                        alt=""></div>
                <div class="item"><img
                        src="https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center"
                        alt=""></div>


    </div>
    <input type="text">
    <span></span>
</body>
<script>
    // var inp = document.querySelector("input")
    // var sp = document.querySelector("span")
    // var obj = {};
    // Object.defineProperty(obj, "msg", {   //空对象的属性名
    //     set(newVal) {                      
    //         sp.innerHTML = newVal       //赋值到需要响应的元素上
    //     }
    // })
    // inp.addEventListener("input", function (e) {
    //     obj.msg = e.target.value        
    // });



    / 瀑布流布局特点: 等宽不等高后添加的元素会添加到最矮的元素之后 /
    var box = document.getElementById("box")
    var items = box.children
    var gap = 60
    document.body.onload = function () {
        waterFall()
        function waterFall() {
            var box = document.querySelector("#box");
            /大容器的宽度/
            var pageWidth = window.innerWidth;
            /单个item的宽度/
            var itemWidth = items[0].offsetWidth;
            /获取到第一行的列数，用大容器的宽度除以每个img盒子的宽度/
            var columns = parseInt(pageWidth / (itemWidth + gap));
            var arr = [];
            for (var i = 0; i < items.length; i++) {
                if (i < columns) {
                    items[i].style.top = 0
                    items[i].style.left = (itemWidth + gap) * i + "px";
                    /先找到第一行所有盒子的高度，并存放到数组中去/
                    arr.push(items[i].offsetHeight);
                }
                else {
                    var minHeight = arr[0]
                    var index = 0;
                    /收集到第一排的所有高度，找到最矮的盒子/
                    for (var j = 0; j < arr.length; j++) {
                        if (minHeight > arr[j]) {
                            minHeight = arr[j];
                            index = j
                        }
                    }
                    /最后再给新添加进去的盒子设置top和left值/
                    items[i].style.top = arr[index] + gap + "px";
                    items[i].style.left = items[index].offsetLeft + "px";
                    arr[index] = arr[index] + items[i].offsetHeight + gap;
                }
            }
        }
        window.onresize = function () {
            waterFall()
        };
        window.onscroll = function () {
            /屏幕的高度+滚动到屏幕上方的高度>内容的高度 也就是触底时会不断添加img标签/
            if (window.innerHeight + window.pageYOffset >= items[items.length - 1].offsetTop) {
                var datas = [
                    "https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center",
                    "https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg",
                    "https://img1.baidu.com/it/u=2910476855,2188262851&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500",
                    "https://img-blog.csdnimg.cn/20200828215733382.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center",
                    "https://csdnimg.cn/feed/20210910/ea3f7b6a0d9d8897f91c79794fbc00d3.jpg",
                    "https://img1.baidu.com/it/u=2910476855,2188262851&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500"
                ]
                for (var i = 0; i < datas.length; i++) {
                    var div = document.createElement("div");
                    div.className = "item"
                    div.innerHTML = '<img src="' + datas[i] + '" alt="">';
                    box.appendChild(div)
                }
                /最后再调用一下封装的核心代码/
                waterFall()
            }
        }
    };

    /解构赋值/

// 基本解构赋值
// let [a,b]=[1,2]
// console.log(a,b);

//忽略解构赋值  
// let [a,,b]=[1,2,3]
// console.log(a,b);

//不完全解构
// let [a,b,c]
// console.log(a,b);

//字符串解构赋值  
// let [a,b,c,d,e]="hello"
// console.log(a,b,c,d,e);

//解构默认值
// let [a=1]=[]
// console.log(a);

//剩余运算符解构赋值
// var [a,b,...test]=[1,2,3,4,5,6,]
// console.log(test);

//对象的解构赋值，基本跟数组解构赋值是一样的,区别是属性名得一样

//剩余运算符还可以用于函数当函数的实参数量不固定是可以用到剩余运算符
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        position: relative;
        height: 2000px;
    }

    img {
        width: 300px;
        display: block;
    }

    .item {
        box-shadow: 2px 2px 2px #999;
        position: absolute;
        counter-increment: item-counter;
    }

    .item::after {
        content: counter(item-counter);
    }
</style>

</html>